/* eslint-disable array-callback-return,no-undef,no-unused-vars */
import React, { Component } from 'react';
import { Button, Form, Input, Modal, Menu, Icon, message } from 'antd';
import styles from '../../../routes/IndexPage.less';
import * as config from '../../../utils/config';

const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;

class PersonCenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sId: props.app.userinfo.sId,
      dispatch: props.dispatch,
      userVisible: false,
      pwdVisible: false,
      sUserName: props.app.userinfo.sUserName,
    };
  }

  handleCancellation = (e) => {
    const { dispatch } = this.state;
    if (e.key === 'loginOut') {
      const url = `${config.server_host}logout`;
      dispatch({ type: 'app/loginOut', payload: { url } });
    } else if (e.key === 'setUser') {
      this.setState({ userVisible: true });
    } else if (e.key === 'setPsd') {
      this.setState({ pwdVisible: true });
    } else if (e.key === 'resetPwd') {
      const { sId } = this.state;
      const url = `${config.server_host}sftlogininfo/updatePasswordUserName/reset?sModelsId=${100}`;
      dispatch({ type: 'app/resetPwd', payload: { url, value: sId } });
    }
  };


  handleSubmitPwd = (e) => {
    /* 阻止表单提交动作 */
    e.preventDefault();
    this.psdform.validateFields((err, values) => {
      if (!err) {
        const { sId } = this.state;
        values.sId = sId;
        if (values.sUserPwd !== values.sUserPwdAgain) {
          message.error('密码输入不一致');
          return;
        }
        const url = `${config.server_host}sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
        const { dispatch } = this.state;
        dispatch({ type: 'app/editPwd', payload: { url, value: values } });
        this.setState({
          pwdVisible: false,
        });
      }
    });
  }

  handleShowModal = () => {
    this.setState({
      visible: true,
    });
  }


  handleCancel = () => {
    this.setState({
      userVisible: false,
      pwdVisible: false,
    });
  };

  handleUserForm = (form) => {
    this.userform = form;
  }

  handlePsdForm = (form) => {
    this.psdform = form;
  }

  handleSubmit = (e) => {
    /* 阻止表单提交动作 */
    e.preventDefault();
    this.userform.validateFields((err, values) => {
      if (!err) {
        const { sId } = this.state;
        values.sId = sId;
        const url = `${config.server_host}sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
        const { dispatch } = this.state;
        dispatch({ type: 'app/editUser', payload: { url, value: values } });
        this.setState({
          userVisible: false,
        });
      }
    });
  };

  render() {
    const { props, state } = this;
    const { sUserName } = props.app.userinfo;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <div>
        <Menu
          className={styles.personMenu}
          mode="horizontal"
          defaultSelectedKeys={['2']}
          onClick={this.handleCancellation}
        >
          <SubMenu
            className={styles.menuGroupUl}
            key="userName"
            title={<span><Icon type="idcard" />{sUserName}<Icon type="down" /></span>}
          >
            <MenuItemGroup className={styles.menuGroup}>
              <Menu.Item key="setUser">修改用户名</Menu.Item>
              <Menu.Item key="setPsd">修改密码</Menu.Item>
              <Menu.Item key="resetPwd">初始化密码</Menu.Item>
            </MenuItemGroup>
          </SubMenu>
          <Menu.Item key="help">
            <Icon type="question-circle-o" />
            帮助
          </Menu.Item>
          <Menu.Item key="loginOut">
            <Icon type="poweroff" />
            注销
          </Menu.Item>
        </Menu>
        <PersonCenterUserName
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          handleSubmit={this.handleSubmit}
          handleCancel={this.handleCancel}
          handleUserForm={this.handleUserForm}
        />
        <PersonCenterPsd
          {...props}
          {...state}
          formItemLayout={formItemLayout}
          tailFormItemLayout={tailFormItemLayout}
          handleSubmitPwd={this.handleSubmitPwd}
          handleCancel={this.handleCancel}
          handlePsdForm={this.handlePsdForm}
        />
      </div>
    );
  }
}
const PersonCenterUserName = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancel,
    handleSubmit,
    tailFormItemLayout,
    handleUserForm,
    formItemLayout,
    form,
    userVisible,
  } = props;
  const { getFieldDecorator } = props.form;
  const { sUserName } = props.app.userinfo;
  return (
    <div>
      <Modal
        title="修改用户名"
        width={500}
        visible={userVisible}
        onCancel={handleCancel}
        footer={null}
        className={styles.changeUserName}
      >
        {handleUserForm(form)}
        <Form onSubmit={handleSubmit} className={styles.popoverForm}>
          <FormItem label="用户名" {...formItemLayout} hasFeedback>
            {getFieldDecorator('sUserName', {
              initialValue: sUserName,
              rules: [{ required: true, message: '请输入新名称!' }],
            })(<Input placeholder="请输入新名称" type="sUserName" />)}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  );
});

const PersonCenterPsd = Form.create({
  mapPropsToFields(props) {
  },
})((props) => {
  const {
    handleCancellation,
    handleCancel,
    handleModalClose,
    handleSubmitPwd,
    handlePsdForm,
    pwdVisible,
    form,
  } = props;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 13 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  const { getFieldDecorator } = props.form;
  return (
    <div>
      <Modal
        title="修改密码"
        width={500}
        visible={pwdVisible}
        onCancel={handleCancel}
        afterClose={handleModalClose}
        footer={null}
        className={styles.changePwd}
      >
        {handlePsdForm(form)}
        <Form onSubmit={handleSubmitPwd} className={styles.popoverForm}>
          <FormItem label="原密码:" {...formItemLayout} hasFeedback>
            {getFieldDecorator('sOldPwd', {
              rules: [{ required: true, message: '请输入原密码!' }],
            })(<Input placeholder="请输入原密码" type="password" />)}
          </FormItem>
          <FormItem label="新密码:" {...formItemLayout} hasFeedback>
            {getFieldDecorator('sUserPwd', {
              rules: [{ required: true, message: '请输入新密码!' }],
            })(<Input placeholder="请输入新密码" type="password" />)}
          </FormItem>
          <FormItem label="确认新密码:" {...formItemLayout} hasFeedback>
            {getFieldDecorator('sUserPwdAgain', {
              rules: [{ required: true, message: '请再次确认新密码!' }],
            })(<Input placeholder="请再次确认新密码" type="password" />)}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Modal>
    </div>
  );
});


export default PersonCenter;
